Minification is a method for deleting unnecessary data from the main codes existing in JavaScript (JS), CSS, and HTML files without making any changes in the general performance of each file and by reducing their size. This method rewrites JavaScript, CSS, and HTML files and deletes all the empty spaces in the code, developer comments, and unused codes.
This method has two advantages:
While writing JS, CSS, and HTML file, web developers use empty spaces, write each piece of code in a new line, and make comments for the better readability of codes and tangibility of code logic for future references. These comments and blank spaces are helpful and even necessary when the webpages are being developed. However, when the web pages are being published on the internet, these comments and blank spaces act as excessive data, making browsers and webservers do extra analysis on them. This causes analysis of an excessive traffic which is not efficient and has no functionality as a result. In fact, the browsers and web servers only need to receive the main codes of webpages.
Minification eliminates these empty spaces and extra data to reduce the size of JS, CSS, and HTML files, helping webpages load faster and reducing the required bandwidth.
The following diagram shows an HTML file before it is minified:
Suporte e migração para a nuvem
<html>
<head>
<style>
#myContent {
font-family: Arial;
font-size: 90%;
}
</style>
</head>
<body>
<!-- start of myContent -->
<div id="myContent">
<p>
Hello world!
</p>
</div>
<!-- end of myContent -->
</body>
</html>
This file changes into what follows after it is minified:
<html><head><style>#myContent{font-family:Arial;font-size:90%;}</style></head><body><div id="myContent"><p>Hello world!</p></div></body></html>
If minification is exercised properly, the minified file size can decrease by 60%. In fact, minification is a standard procedure for optimizing webpages.
Minification is a major component of frontend optimization (FEO). In brief words, FEO is a series of techniques and tools employed to reduce the size of files and the number of requests for webpages.
Minification can be difficult to exercise and maintain. For instance, it is nearly impossible to manually perform minification on large files. Even automated minification tools sometimes face certain challenges. The main problem in the minification of JS, CSS, and HTML files is to retain the large number of files (both main files for future development and minified files for release). Another problem is to continuously ensure that different versions of files are kept in sync.
Arvancloud Content Delivery Network (CDN) provides automatic minification for webpage files to solve the aforesaid problems. A website administrator only needs to put the main files of a website on the server (without the need to minifying these files). Arvancloud CDN automatically develops the minified versions of their JS, CSS, and HTML files and caches them on its servers.
At the same time, the minified versions of the main files are automatically updated and synchronized with any possible changes in the main files.
Arvancloud CDN performs an automatic minification process to help webpages load faster and prepare everything so that the website administrator does not need to consider any excessive configuration.